<template>
  <div class="px-4 -mt-4">
    <a-tabs v-model:activeKey="activeKey" @change="onChangeTab">
      <a-tab-pane :key="item.id" :tab="item.name" v-for="item in types"></a-tab-pane>
    </a-tabs>
    <this-table ref="table" />
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import thisTable from './table.vue';
import { useRoute } from 'vue-router';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { thisTable },
  setup() {
    const route = useRoute();
    const types = ref([]);
    const activeKey = ref();

    const table = ref<any>(null);

    function getTypes() {
      defHttp
        .get({ url: '/Project/get-sensor-type', params: { id: route.params.id } })
        .then((res) => {
          types.value = res.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
            };
          });
          if (types.value.length) {
            activeKey.value = types.value[0].id;
            onChangeTab();
          }
        });
    }

    function onChangeTab() {
      table.value.getTableData({
        projectId: route.params.id,
        sensorTypeId: activeKey.value,
      });
    }

    getTypes();

    return {
      activeKey,
      types,
      onChangeTab,
      table,
    };
  },
});
</script>
  
  